<template>
    <div class="tree">
        <div class="input" v-if="isShowInput">
            <el-input v-model="filterText" :placeholder="placeholder" />
        </div>
        <el-tree
            ref="treeRef"
            :data="data"
            :filter-node-method="filterNode"
            highlight-current
            @node-click="handlerNode"
            node-key="id"
            :draggable="isDraggable"
            @node-drag-start="nodeDragStart"
            @node-drop="nodeDrop"
            :allow-drop="allowDropFn"
            :expand-on-click-node="isClickNode"
            :default-expanded-keys="expandedKey"
            :current-node-key="currentKey"
            :show-checkbox="isShowCheckbox"
            :check-strictly="isCheckStrictly"
            @check="treeCheck"
            :check-on-click-node="true"
            :props="treeProps"
            :icon="icon"
        >
            <template #default="{ data }">
                <slot :scope="{ data }"></slot>
            </template>
        </el-tree>
    </div>
</template>

<script setup>
import { ref, watch } from "vue";

const emits = defineEmits(["nodeDragStart", "nodeDrop", "handlerNode", "treeCheck"]);
const props = defineProps({
    data: {
        type: Array,
        default() {
            return [];
        }
    },
    isDraggable: {
        type: Boolean,
        default: false
    },
    placeholder: {
        type: String,
        default: "请输入区域"
    },
    isClickNode: {
        type: Boolean,
        default: true
    },
    expandedKey: {
        type: Array,
        default: []
    },
    currentKey: {
        type: String,
        default: ""
    },
    isShowCheckbox: {
        type: Boolean,
        default: false
    },
    isShowInput: {
        type: Boolean,
        default: true
    },
    isCheckStrictly: {
        type: Boolean,
        default: false
    },
    icon: {
        type: Object,
        default() {
            return {};
        }
    },
    treeProps: {
        type: Object,
        default() {
            return {};
        }
    }
    // allowDrop: {
    //   type: Function,
    //   default: () => {},
    // },
});
const treeCheck = (a, b) => {
    emits("treeCheck", a, b);
};
const allowDropFn = (a, b, type) => {
    if (type === "prev" || type === "next") {
        return false;
    } else {
        return true;
    }
};
const treeRef = ref();
const filterText = ref("");
watch(filterText, (val) => {
    treeRef.value.filter(val);
});
const filterNode = (value, data, node) => {
    if (!filterText.value) {
        if (node.id === 1) {
            node.expanded = false;
        }
        return true;
    }
    if (!value) return true;
    return data.label.includes(value);
};
const treeChooseData = ref(); //当前树选中的值
const handlerNode = (a, b, c, d) => {
    treeChooseData.value = a;
    emits("handlerNode", a, b, c, d);
};
const nodeDragStart = (node, enterNode) => {
    emits("nodeDragStart");
};
const nodeDrop = (node, enterNode, position) => {
    // let nodeName = node.data.label;
    // let nodeEnterName = "";
    // if (position === "inner") {
    //   nodeEnterName = enterNode.data.label;
    // } else {
    //   enterNode.parent.data.label ? (nodeEnterName = enterNode.parent.data.label) : (nodeEnterName = "顶层");
    // }
    emits("nodeDrop", node.data, enterNode.data, position);
};
//判断顶层是否需要移入
// const allowDrop = (_, dropNode, type) => {
//   if (dropNode.id === 1) {
//     let isGo = false;
//     type === "prev" || type === "next" ? (isGo = false) : (isGo = true);
//     return isGo;
//   }
//   return true;
// };
defineExpose({
    treeChooseData,
    treeRef
});
</script>

<style lang="less" scoped>
.tree {
    margin-top: 20px;
    .input {
        margin: 20px 0;
    }
    ::v-deep(.el-icon.el-tree-node__expand-icon.is-leaf) {
        visibility: hidden;
    }
    ::v-deep(.el-tree-node__expand-icon.expanded) {
        transform: rotate(0deg);
    }
}
</style>
